<template>
  <div class="cosmic-container">
    <!-- 主选择界面 -->
    <div class="selection-screen">
      <!-- 左侧：新建 -->
      <div
        class="option-panel left-panel"
        @click="selectOption('new')"
        @mouseenter="hoverOption = 'new'"
        @mouseleave="hoverOption = null"
        :class="{
          hovered: hoverOption === 'new',
        }"
      >
        <div class="panel-content">
          <div class="option-title">新建</div>
          <div class="option-subtitle">开始新的征程</div>
        </div>
        <div class="stars-bg"></div>
      </div>

      <!-- 中间分割线 -->
      <div class="center-divider">
        <div class="divider-line"></div>
      </div>

      <!-- 右侧：历史 -->
      <div
        class="option-panel right-panel"
        @click="selectOption('history')"
        @mouseenter="hoverOption = 'history'"
        @mouseleave="hoverOption = null"
        :class="{
          hovered: hoverOption === 'history',
        }"
      >
        <div class="panel-content">
          <div class="option-title">历史</div>
          <div class="option-subtitle">回顾过往记录</div>
        </div>
        <div class="stars-bg"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useMessage, useDialog } from 'naive-ui';
  import { useRouter } from 'vue-router';
  import { invoke } from '@tauri-apps/api/core';

  const message = useMessage();
  const dialog = useDialog();
  const router = useRouter();

  // 状态管理
  const hoverOption = ref(null);

  // 检查API Key是否已设置
  const checkApiKey = async () => {
    try {
      const settings = await invoke('get_user_settings');
      return (
        settings.ai_settings &&
        settings.ai_settings.api_key &&
        settings.ai_settings.api_key.trim() !== ''
      );
    } catch (error) {
      console.error('获取用户设置失败:', error);
      return false;
    }
  };

  // 显示API Key未设置的提示对话框
  const showApiKeyDialog = () => {
    dialog.warning({
      title: 'API Key未设置',
      content: '使用COSMIC功能需要先设置AI的API Key，是否前往设置页面？',
      positiveText: '前往设置',
      negativeText: '取消',
      onPositiveClick: () => {
        router.push('/setting/user?tab=ai');
      },
    });
  };

  // 选择选项
  const selectOption = async (option) => {
    if (option === 'new') {
      // 检查API Key然后跳转到新建页面
      const hasApiKey = await checkApiKey();
      if (!hasApiKey) {
        showApiKeyDialog();
        return;
      }
      router.push('/tools/cosmic-new');
    } else if (option === 'history') {
      // 跳转到历史页面
      router.push('/tools/cosmic-history');
    }
  };
</script>

<style scoped>
  .cosmic-container {
    position: relative;
    min-height: 100vh;
    background: #f8fafc;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0 auto;
    padding: 0;
    border: none;
    outline: none;
    text-decoration: none;
    list-style: none;
  }

  .selection-screen {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
  }

  .option-panel {
    flex: 1;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
  }

  .left-panel {
    background: linear-gradient(135deg, #1a2332 0%, #2d4a6b 50%, #1e3a5f 100%);
  }

  .right-panel {
    background: linear-gradient(135deg, #4a1a4a 0%, #7d2d7d 50%, #5f1e5f 100%);
  }

  .option-panel.hovered {
    filter: brightness(1.3);
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.15);
    transform: scale(1.02);
  }

  .option-panel.hovered .panel-content {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .option-panel.hovered .stars-bg {
    animation-duration: 2s;
  }

  .panel-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
    transition: transform 0.3s ease;
  }

  .option-title {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
  }

  .left-panel .option-title {
    color: #00d4ff;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
  }

  .right-panel .option-title {
    color: #ff00ff;
    text-shadow: 0 0 30px rgba(255, 0, 255, 0.8);
  }

  .option-subtitle {
    font-size: 1.2rem;
    opacity: 0.8;
    font-weight: 300;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
  }

  .stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.3), transparent),
      radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.2), transparent),
      radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.3), transparent),
      radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.2), transparent);
    background-repeat: repeat;
    background-size: 200px 100px;
    animation: twinkle 4s ease-in-out infinite alternate;
  }

  @keyframes twinkle {
    0% {
      opacity: 0.3;
    }
    100% {
      opacity: 0.8;
    }
  }

  .center-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .divider-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 212, 255, 0.3) 20%,
      rgba(255, 0, 255, 0.8) 50%,
      rgba(0, 212, 255, 0.3) 80%,
      transparent 100%
    );
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.3);
  }

  @media (max-width: 768px) {
    .option-title {
      font-size: 2.5rem;
    }

    .option-subtitle {
      font-size: 1rem;
    }
  }
</style>
